<template>
  <div>
    <!-- 头部导航栏，只有登录后显示 -->
    <div v-if="userInfo" class="header">
      <div class="header-title">学生作业提交系统</div>
      <div class="header-user">
        <!-- 学生显示：账号、学生姓名、班级 -->
        <template v-if="userInfo.role === 'student'">
          <span>{{ userInfo.username }}</span>
          <span>{{ userInfo.name }}</span>
          <span v-if="userInfo.className">({{ userInfo.className }})</span>
        </template>
        <!-- 教师显示：账号、教师姓名 -->
        <template v-else-if="userInfo.role === 'teacher'">
          <span>{{ userInfo.username }}</span>
          <span>{{ userInfo.name }}</span>
        </template>
        <!-- 默认情况 -->
        <template v-else>
          <span>{{ userInfo.username }}</span>
          <span v-if="userInfo.name">{{ userInfo.name }}</span>
          <span v-if="userInfo.className">({{ userInfo.className }})</span>
        </template>
        <button class="layui-btn layui-btn-sm" @click="changePassword">修改密码</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" @click="logout">退出登录</button>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <div v-if="Component">
            <component :is="Component" />
          </div>
          <div v-else></div>
        </transition>
      </router-view>
    </div>
    
    <!-- 修改密码弹窗已移除，使用layer.open中的内联HTML内容 -->
  </div>
</template>

<script>
// Vue 2使用选项式API，不需要这些导入
import { useRouter } from 'vue-router';
import { api } from '@/utils/api.js';

export default {
  name: 'App',
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.initUserInfo();
    // 添加路由变化监听，解决登录后头部导航栏不显示的问题
    this.$router.afterEach(() => {
      this.updateUserInfo();
    });
  },
  methods: {
    // 初始化用户信息
    async initUserInfo() {
      const storedUserInfo = localStorage.getItem('userInfo');
      const token = localStorage.getItem('token');
      
      if (storedUserInfo) {
        this.userInfo = JSON.parse(storedUserInfo);
      }
      
      // 如果有token，从API获取最新的用户信息，确保包含name字段
      if (token) {
        try {
          const response = await api.getUserInfo();
          const latestUserInfo = response.data || response;
          // 更新localStorage中的用户信息
          localStorage.setItem('userInfo', JSON.stringify(latestUserInfo));
          // 更新组件中的用户信息
          this.userInfo = latestUserInfo;
        } catch (error) {
          console.log('获取最新用户信息失败:', error);
          // 获取失败不影响程序运行，继续使用localStorage中的信息
        }
      }
    },
    
    // 更新用户信息（用于路由变化监听）
    updateUserInfo() {
      const storedUserInfo = localStorage.getItem('userInfo');
      if (storedUserInfo) {
        this.userInfo = JSON.parse(storedUserInfo);
      } else {
        this.userInfo = null;
      }
    },
    
    // 退出登录
    logout() {
      layer.confirm('确定要退出登录吗？', {
        btn: ['确定', '取消']
      }, () => {
        localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        this.userInfo = null;
        this.$router.push('/login');
        layer.closeAll();
      });
    },
    
    // 修改密码
    async changePassword() {
      // 打开发弹窗
      // 使用HTML字符串内容代替DOM元素，避免jQuery依赖问题
      layer.open({
        type: 1,
        title: '修改密码',
        area: ['500px', '350px'],
        content: `
          <div style="padding: 20px;">
            <div class="layui-form-item">
              <label class="layui-form-label">原密码</label>
              <div class="layui-input-block">
                <input type="password" id="oldPassword" lay-verify="required" placeholder="请输入原密码" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-block">
                <input type="password" id="newPassword" lay-verify="required" placeholder="请输入新密码" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认新密码</label>
              <div class="layui-input-block">
                <input type="password" id="confirmPassword" lay-verify="required" placeholder="请确认新密码" class="layui-input">
              </div>
            </div>
          </div>
        `,
        btn: ['确认', '取消'],
        success: () => {
          layui.form.render();
        },
        yes: async () => {
          // 获取表单数据
          const oldPassword = document.getElementById('oldPassword').value;
          const newPassword = document.getElementById('newPassword').value;
          const confirmPassword = document.getElementById('confirmPassword').value;
          
          // 验证表单
          if (!oldPassword || !newPassword) {
            layer.msg('请填写完整信息', { icon: 5 });
            return;
          }
          
          if (newPassword !== confirmPassword) {
            layer.msg('两次输入的新密码不一致', { icon: 5 });
            return;
          }
          
          try {
            const res = await axios.post('/api/users/change-password', {
              oldPassword: oldPassword,
              newPassword: newPassword
            });

            console.log('修改密码响应:', res);
            
            if (res.success) {
              layer.msg('密码修改成功', { icon: 6, time: 1000 }, function() {
                // 消息显示完3秒后再关闭所有弹窗
                layer.closeAll();
              });
            } else {
              layer.msg(res.message, { icon: 5, time: 3000 }); // 设置3秒显示时间
            }
          } catch (error) {
            console.error('修改密码失败:', error);
            layer.msg('网络请求失败，请稍后重试', { icon: 5, time: 3000 }); // 设置3秒显示时间
          }
        }
      });
    }
  },
  beforeDestroy() {
    // 清理用户信息
    this.userInfo = null;
  }
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>